{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@timepicker_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .timeLabel{padding-left: 0;width: 172px;display: inline;float: left}
    </style>
{% endblock %}
{% block content %}
    <div class="page-content">
        <form class="form-horizontal" role="form" method="post" id="rule-form" >
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'The genus number'|trans }}</label>
                <div class="col-sm-7">
                    <select class="col-xs-10 col-sm-5" name="phone_id" id="phone_id">
                        <option value="0" {% if rule.phoneId == 0 %}selected{% endif %}>{{ 'All'|trans }}</option>
                        {% for phone in phones %}
                            <option value="{{ phone.phoneId }}" {% if rule.phoneId == phone.phoneId %}selected{% endif %}>{{ phone.phone }}[{{ phone.phone400 }}]</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'The schedule name'|trans }}</label>
                <div class="col-sm-7">
                    <input type="text" id="rule_name" name="rule_name" value="{{ rule.ruleName }}" placeholder="{{ 'The schedule name'|trans }}" class="col-xs-10 col-sm-5">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Priority'|trans }}</label>
                <div class="col-sm-7">
                    <input type="text" id="priority" name="priority" value="{% if rule.priority|trim|length >= 1 %}{{ rule.priority }}{% else %}1{% endif %}" class="col-xs-10 col-sm-5">
                    <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'The schedule of the priority index, the lower the number, the higher the priority, then the order of priority'|trans }}" title="" >?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Start date'|trans }}</label>
                <div class="col-sm-7">
                    <div class="timeLabel">
                        <label class="checkbox-inline " style="padding-left: 0">
                            <input type="radio" id="sdate" name="sdate" value="1" onclick="switchShow(1,'start_date', 'edate', 'end_date')" {% if rule.startDate == '*' %}checked="checked"{% endif %} > {{ 'Arbitrarily'|trans }}</label>
                        <label class="checkbox-inline" style="padding-left: 0">
                            <input type="radio" id="sdate" name="sdate" value="2" onclick="switchShow(2,'start_date', 'edate', 'end_date')"  {% if rule.startDate != '*' %}checked="checked"{% endif %}> {{ 'The specific date'|trans }}</label>
                    </div>
                    <div class="col-xs-10 col-sm-4">
                    <input type="text" id="start_date" name="start_date" class="col-xs-12 col-sm-12 datetype "  value="{{ rule.startDate }}"  {% if rule.startDate == '*' %}disabled="disabled"{% endif %}/></div>
                    <span class="help-button  col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'Format: 2000-01-01 or *, * means any'|trans }}" title="" >?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'End date'|trans }}</label>
                <div class="col-sm-7">
                    <div class="timeLabel">
                        <label class="checkbox-inline " style="padding-left: 0">
                            <input type="radio" id="edate" name="edate" value="1" onclick="switchShow(1,'end_date', 'sdate', 'start_date')" {% if rule.endDate == '*' %}checked="checked"{% endif %} > {{ 'Arbitrarily'|trans }}</label>
                        <label class="checkbox-inline" style="padding-left: 0">
                            <input type="radio" id="edate" name="edate" value="2" onclick="switchShow(2,'end_date', 'sdate', 'start_date')" {% if rule.endDate != '*' %}checked="checked"{% endif %} > {{ 'The specific date'|trans }}</label>
                    </div>
                    <div class="col-xs-10 col-sm-4">
                    <input type="text" id="end_date" name="end_date" class="col-xs-12 col-sm-12 datetype" value="{{ rule.endDate }}" {% if rule.endDate == '*' %}disabled="disabled"{% endif %} />
                    </div>
                        <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom"
                          data-content="{{ 'Format: 2000-01-01 or *, * means any'|trans }}"
                          title="">?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Start time'|trans }}</label>
                <div class="col-sm-7">
                    <div class="timeLabel">
                        <label class="checkbox-inline " style="padding-left: 0">
                            <input type="radio" id="stime" name="stime" value="1" onclick="switchShow(1,'start_time', 'etime', 'end_time')" {% if rule.startTime == '*' %}checked="checked"{% endif %} > {{ 'Arbitrarily'|trans }}</label>
                        <label class="checkbox-inline" style="padding-left: 0">
                            <input type="radio" id="stime" name="stime" value="2" onclick="switchShow(2,'start_time', 'etime', 'end_time')"  {% if rule.startTime != '*' %}checked="checked"{% endif %} > {{ 'The specific date'|trans }}</label>
                    </div>
                    <div class="col-xs-10 col-sm-4">
                        <input type="text" id="start_time" name="start_time" class="col-xs-12 col-sm-12 timetype" value="{{ rule.startTime }}"
                           {% if rule.startTime == '*' %}disabled="disabled"{% endif %} />
                    </div>
                    <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'Format: 10:00 or *, * means any'|trans }}"
                          title="" >?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'End time'|trans }}</label>
                <div class="col-sm-7">
                    <div class="timeLabel">
                        <label class="checkbox-inline " style="padding-left: 0">
                            <input type="radio" id="etime" name="etime" value="1" onclick="switchShow(1,'end_time', 'stime', 'start_time')"  {% if rule.endTime == '*' %}checked="checked"{% endif %} > {{ 'Arbitrarily'|trans }}</label>
                        <label class="checkbox-inline" style="padding-left: 0">
                            <input type="radio" id="etime" name="etime" value="2" onclick="switchShow(2,'end_time', 'stime', 'start_time')"  {% if rule.endTime != '*' %}checked="checked"{% endif %}> {{ 'The specific date'|trans }}</label>
                    </div>
                    <div class="col-xs-10 col-sm-4">
                        <input type="text" id="end_time" name="end_time" class="col-xs-12 col-sm-12 timetype" value="{{ rule.endTime }}" {% if rule.endTime == '*' %}disabled="disabled"{% endif %}>
                    </div>
                <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'Format: 10:00 or *, * means any'|trans }}"
                      title="">?</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Week'|trans }}</label>
                <div class="col-sm-7">
                    {% for key,week in weeks %}
                        <label class="checkbox-inline"><input type="checkbox" name="weeks[]" value="{{ key }}"
                          {% if key in rule.weeks %}checked="checked"{% endif %}>
                            {{ week }}</label>
                    {% endfor %}
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'The IVR process'|trans }}</label>
                <div class="col-sm-7">
                    <select class="col-xs-10 col-sm-5" name="ivr_id" id="ivr_id">
                        {% for ivr in ivrList %}
                            <option value="{{ ivr.ivrId }}" {% if rule.ivrId == ivr.ivrId %}selected{% endif %}>{{ ivr.ivrName }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            {{ create(path('icsoc_rules_list')) }}
        </form>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@datepicker_js'
    '@timepicker_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#rule-form').validate({
            {{ jqvalidator() }}
            errorPlacement: function(error, element){
                var id = element[0].name;
                if (id == 'start_date' || id == 'end_date' || id == 'weeks[]' || id == 'start_time' || id == 'end_time') {
                    error.appendTo(element.parent().parent());
                    $(element.parent().parent().parent()).attr('class','form-group has-error');
                    return ;
                } else {
                    error.appendTo(element.parent());
                }
                $(element.parent().parent()).attr('class','form-group has-error');
            },
            showErrors: function(errorMap, errorList) {
                this.defaultShowErrors();
                for (var i=0; i<errorList.length;i++) {
                    var id = errorList[i].element.name;
                    if (id == 'start_date' || id == 'end_date' || id == 'weeks[]' || id == 'start_time' || id == 'end_time') {
                        $(errorList[i].element).parent().parent().parent().attr('class', 'form-group has-error');
                    } else {
                        $(errorList[i].element).parent().parent().attr('class', 'form-group has-error');
                    }
                    $(errorList[i].element).removeClass('help-block');
                }
            },
            rules: {
                'rule_name': {
                    required:true,
                    remote: {
                        url: '{{ path('icsoc_rules_check_name') }}',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            rule_name: function(){
                                return $('#rule_name').val();
                            },
                            phone_id: function(){
                                return $('#phone_id').val();
                            },
                            rule_id: function(){
                                return '{{ rule_id}}';
                            }
                        }
                    }
                },
                'priority': {digits:true},
                'ivr_id': {required:true},
                'start_date': {required:true,date:function(){
                    return $("input[name='sdate']:checked").val() == 1 ? false : true;
                }},
                'end_date': {required:true, date:function(){
                    return $("input[name='edate']:checked").val() == 1 ? false : true;
                }},
                'start_time': {required:true},
                'end_time': {required:true},
                'phone_id':{required:true},
                'weeks[]':{required:true}
            },
            messages: {
                'rule_name': {required:"{{ 'Schedule rule name cannot be empty'|trans  }}", remote:'{{ 'Schedule rule already exists'|trans }}'},
                'priority': {digits:'{{ 'Priority must be numeric'|trans }}'},
                'ivr_id': {required:'{{ 'Select the IVR process'|trans }}'},
                'start_date':{date:'{{ 'Please enter a valid date'|trans }}'},
                'end_date':{date:'{{ 'Please enter a valid date'|trans }}'},
                'weeks[]':{required:'{{ 'Please select at least one'|trans }}' }
            }
        });
        jQuery.extend(jQuery.validator.messages, {
            'required':'{{ 'This field is required'|trans }}'
        });
        $(function () {
            $('.datetype').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                widgetPositioning:{horizontal:'left'}
            });
            $('.timetype').datetimepicker({
                locale: 'zh-cn',
                format: 'HH:mm',
                widgetPositioning:{horizontal:'left'}
            });
            //; //先置成*
            {% if rule.startTime == '*' %}
                 $('#start_time').val('*')
            {% endif %}
            {% if rule.endTime == '*' %}
            $('#end_time').val('*')
            {% endif %}
            {% if rule.startDate == '*' %}
            $('#start_date').val('*')
            {% endif %}
            {% if rule.endDate == '*' %}
            $('#end_date').val('*')
            {% endif %}
        });
        function switchShow(val, id, xname, xid)
        {
            var v = val == 1 ? '*' : '';
            $('#'+id).val(v);
            $('#'+xid).val(v);
            val == 1 ? $("#"+id).attr("disabled","disabled") : $("#"+id).attr("disabled",false);
            $("input[name='"+xname+"'][value='"+val+"']").prop("checked","checked");
            val == 1 ? $("#"+xid).attr("disabled","disabled") : $("#"+xid).attr("disabled",false);
        }
    </script>
{% endblock %}